<template>
    <div>
        <div class="headBox">
            <img src="https://codelover.club/static/img/headLogo.d458f61f.png" alt="">
            <span>程/序/员/的/梦/工/厂</span>
        </div>
        <div class="registration-form">
           <router-link to="/LoginForm">
            <div class="return-login" @click="goToLogin">返回登录</div>
           </router-link>
            <h2>快速注册</h2>
            <form @submit.prevent="submitForm">
                <!-- 邮箱输入 -->
                <div>
                    <input type="email" id="email" v-model="email" placeholder="请输入邮箱" required>
                </div>

                <!-- 验证码输入与获取按钮 -->
                <div class="verification-wrapper" >
                    <input type="text" id="verification" v-model="verification" placeholder="请输入获取的验证码" required>
                    <span class="get-verification" @click="getEmailVerification">获取验证码</span>
                </div>

                <!-- 密码输入 -->
                <div>
                    <input type="password" id="password" v-model="password" placeholder="请输入密码" required>
                </div>

                <!-- 确认密码输入 -->
                <div>
                    <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="请确认密码" required>
                </div>

                <!-- 用户类型选择 -->
                <div>
                    <label>选择用户类型(可多选):</label>
                    <common-list :items="userTypes" v-model="selectedUserTypes" type="checkbox"
                        style="position: relative;left:20px"></common-list>
                </div>

                <!-- 用户协议同意 -->
                <div class="user-agree">
                    <input type="checkbox" id="agree" v-model="agreeTerms">
                    <label for="agree">
                        同意
                        <a href="#" @click.prevent="showModal('terms')">《在线学院注册协议》</a>
                        和
                        <a href="#" @click.prevent="showModal('privacy')">《隐私政策》</a>
                    </label>
                </div>

                <!-- 模态框：在线学院注册协议 -->
                <div v-if="isModalVisible('terms')" class="modal-background">
                    <div class="modal-content">
                        <span class="close" @click="hideModal('terms')">&times;</span>
                        <h2>在线学院注册协议</h2>
                        <p v-html="termsOfServiceContent"></p>
                    </div>
                </div>

                <!-- 模态框：隐私政策 -->
                <div v-if="isModalVisible('privacy')" class="modal-background">
                    <div class="modal-content">
                        <span class="close" @click="hideModal('privacy')">&times;</span>
                        <h2>隐私政策</h2>
                        <p v-html="privacyPolicyContent"></p>
                    </div>
                </div>


                <!-- 注册按钮 -->
               <router-link to="/">
                <button type="submit" class="zc">立即注册</button>
               </router-link>
            </form>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, defineComponent } from 'vue';
import CommonList from '../components/register.vue';

const email = ref('');
const verification = ref('');
const password = ref('');
const confirmPassword = ref('');
const userTypes = ['大学生', '中小学生', '家长', '招聘企业', '导师', '课程设计师', '教师', '教务', '社会学员', '企业团购学员'];
const selectedUserTypes = ref([]);
const agreeTerms = ref(false);

// 控制模态框显示的状态
const isModalVisibleTerms = ref(false);
const isModalVisiblePrivacy = ref(false);

const isModalVisible = (type) => {
    switch (type) {
        case 'terms':
            return isModalVisibleTerms.value;
        case 'privacy':
            return isModalVisiblePrivacy.value;
        default:
            return false;
    }
};

// 显示模态框
const showModal = (type) => {
    switch (type) {
        case 'terms':
            isModalVisibleTerms.value = true;
            break;
        case 'privacy':
            isModalVisiblePrivacy.value = true;
            break;
    }
};

// 隐藏模态框
const hideModal = (type) => {
    switch (type) {
        case 'terms':
            isModalVisibleTerms.value = false;
            break;
        case 'privacy':
            isModalVisiblePrivacy.value = false;
            break;
    }
};

// 在线学院注册协议内容
const termsOfServiceContent = `一、总则此份协议是注册用户接受在线学院网站codelover.club(以下简称本站)产品和服务时适用的通用条款。因此，请您在注册成为本站用户前或接受本站的产品和服务之前，请您详细地阅读本注册用户协议的所有内容。

1、注册用户了解并同意:

①只要注册用户点击同意按钮并完成注册，注册用户就已接受了本注册用户协议及本站公布的各项服务规则（包括填写实名的联系方式等等），并愿意受其约束。如果发生纠纷，注册用户不得以未仔细阅读为由进行抗辩。 ②随着市场经营情况的变化，本站有权随时更改本注册用户协议及相关服务规则。修改本注册用户协议时，本站将于相关页面公告修改的事实，有权不对注册用户进行个别通知。注册用户应该在每次登录前查询网站的相关公告，以了解注册用户协议及其他服务规则的变化。`;
// 隐私政策的内容（示例文本）
const privacyPolicyContent = "在线学院网站codelover.club(以下简称“在线学院”)尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，在线学院会按照本隐私权政策的规定使用和披露您的个人信息。但在线学院将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，在线学院不会将这些信息对外披露或向第三方提供。在线学院会不时更新本隐私权政策。 您在同意在线学院服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于在线学院服务使用协议不可分割的一部分。";

// // 显示模态框
// const showModal = () => {
//     isModalVisible.value = true;
// };

// // 隐藏模态框
// const hideModal = () => {
//     isModalVisible.value = false;
// };

const canSubmit = computed(() =>
    email.value &&
    verification.value &&
    password.value === confirmPassword.value &&
    selectedUserTypes.value.length > 0 &&
    agreeTerms.value
);

const submitForm = () => {
    if (canSubmit.value) {
        // 表单提交逻辑
        console.log('Form submitted with:', {
            email: email.value,
            verification: verification.value,
            password: password.value,
            userTypes: selectedUserTypes.value,
            agree: agreeTerms.value,
        });
    } else {
        alert('请填写完整表单并同意条款');
    }
};

const getEmailVerification = async () => {
    if (email.value) {
        try {
            const response = await fetch('/api/verification', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email: email.value }),
            });

            if (!response.ok) {
                throw new Error(`Error: ${response.status}`);
            }

            const data = await response.json();
            if (data.success) {
                console.log('Verification code sent:', data.code);
                // 可以在这里添加成功提示的逻辑
            } else {
                console.error('Error sending verification code:', data.message);
                // 可以在这里添加错误提示的逻辑
            }
        } catch (error) {
            console.error('Network error:', error);
            // 可以在这里添加网络错误的提示逻辑
        }
    } else {
        alert('Please enter your email address.');
    }
};

// 定义组件
const ComponentWithCommonList = defineComponent({
    components: {
        CommonList
    },
    setup() {
        // ... 所有以上的代码 ...
        return {
            // ... 所有ref和函数 ...
        };
    }
});
</script>

<style scoped>

.common-list{
    max-width: 300px;
    /* 举例，设置一个合适的最大宽度 */
    width: 100%;
    /* 确保它填满其父容器的宽度 */
}



/* 模态框的背景，使得其余页面部分变暗 */
.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 60%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 黑色背景，半透明 */
    z-index: 10;
    /* 确保模态框背景位于页面其他内容之上 */
}

/* 模态框内容容器 */
.modal-content {
    position: fixed;
    /* 使用fixed定位，以便居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 使用CSS transform属性居中 */
    background-color: #fefefe;
    /* 模态框背景颜色 */
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    max-width: 500px;
    /* 设置模态框的最大宽度 */
    z-index: 11;
    /* 确保模态框内容位于背景之上 */
    border-radius: 5px;
    /* 为模态框添加圆角 */
}

/* 关闭按钮 */
.modal-content .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-content .close:hover,
.modal-content .close:focus {
    color: black;
    text-decoration: none;
}

/* 模态框文本内容 */
.modal-content p {
    line-height: 1.5;
    /* 文本行高 */
}

.headBox {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    height: 80px;
    text-align: center;
    align-items: center;
    /* 垂直居中图片和文字 */
    margin-bottom: 10px;
    /* 为图片和文字组合添加一些间隔 */

}

.headBox img {
    max-width: 50px;
    /* 设置图片的最大宽度 */
    height: auto;
    /* 保持图片的宽高比 */
    margin-right: 40px;
    /* 图片和文字之间的间距 */
}

.headBox span {
    text-align: center;
    font-size: 18px;
    /* 设置文字的字体大小 */
    font-weight: 700;
    /* 设置文字为粗体 */
    color: #707070;
    /* 设置文字颜色 */
}



.return-login {
    position: absolute;
    top: 15px;
    right: 20px;
    /* 根据需要调整 */
    cursor: pointer;
    color: #0e79c0;

}

.return-login:hover {
    color: #0056b3;
}

.registration-form {

    max-width: 400px; /* 固定的最大宽度 */
    min-width: 300px; /* 确保在小屏幕上不会太窄 */
    width: 100%; /* 宽度为屏幕宽度的90% */
    padding: 45px;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    margin: auto; /* 水平和垂直自动边距 */
}

.registration-form h2 {
    text-align: center;
    font-weight: 700;
    color: #0e79c0;
}

.registration-form form>div {
    margin-bottom: 20px;
    margin-top: 20px;
}

.registration-form label {
    display: block;
    margin-bottom: 5px;
}

/* 验证码输入框 */
.verification-wrapper {
    position: relative;
    /* 使 span 可以绝对定位 */
    display: flex;
    /* 使用弹性盒子布局 */
    align-items: center;
    /* 垂直居中 */
}

.verification-wrapper input {
    padding-right: 80px;
    /* 留出空间给 get-verification span */
    flex-grow: 1;
    /* 让输入框占据除按钮外的所有空间 */

}

.get-verification {
    position: absolute;
    right: 10px;
    /* 根据实际情况调整，确保不超出输入框边界 */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #0e79c0;
    border-left: 1px dashed #909090;
    /* 添加一些左边距，使得虚线和文字之间有间隔 */
    padding-left: 6px;
    padding-right: 12px;
}

.get-verification:hover {
    color: #0056b3;
}



.registration-form input[type=email],
.registration-form input[type=text],
.registration-form input[type=password] {
    width: 100%;
    padding: 8px;
    height: 40px;
    border: 1px solid #ececec;
    border-radius: 4px;
    background-color: #ececec;
    /* 确保背景颜色透明，以便看到黄色背景 */
    transition: border-color 0.2s;
    /* 平滑的边框颜色过渡效果 */
}

/* 使用 :focus-within 选择器，当输入框获得焦点时（即被点击或里面有内容）改变样式 */
.registration-form input:focus-within {
    border-color: #ececec;
    /* 黄色边框颜色 */
    background-color: #fff;
    /* 输入框背景颜色，可根据需要调整 */
    outline: none;
    /* 移除默认的轮廓线，如果您喜欢可以保留 */
}

/* 如果您想要在获得焦点时改变整个输入框的背景颜色，而不是只有边框，可以这样 */
.registration-form input:focus {
    background-color: #fff5d2;
    /* 黄色背景颜色 */

}

.registration-form input::placeholder {
    color: #ccc;
    font-size: 16px;
    /* 可以根据需要调整 */
    transition: opacity 0.3s ease;
    /* 平滑的过渡效果 */
}


/* 当输入框获得焦点时，使placeholder消失 */
/* .registration-form input:focus::placeholder {
  opacity: 0;
  
} */

.registration-form button {
    width: 80%;
    padding: 10px;
    border: none;
    background-color: #0e79c0;
    color: white;
    cursor: pointer;
    justify-content: center;
}

.zc {
    background-color: #0e79c0;
    cursor: not-allowed;
    border-radius: 25px;
    height: 48px;
    position: relative;
    display: block;
    /* 使按钮的宽度为块级元素的默认宽度 */
    margin-left: auto;
    /* 自动设置左边距 */
    margin-right: auto;
    /* 自动设置右边距 */
}

.user-types,
.user-agree {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 水平居中 */
    margin-bottom: 20px;
    /* 根据需要调整 */
    /* 根据需要调整 */

}

.user-types label,
.user-agree {
    margin-right: 1rem;
    /* 根据需要调整间距 */
}

.input-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-with-button input {
    flex-grow: 1;
    margin-right: 5px;
    /* Adjust spacing between input and button */
}

.input-with-button button {
    white-space: nowrap;
    /* Prevents button text from wrapping to new line */
}

/* 针对小屏幕设备的样式 */
@media (max-width: 768px) {
    .registration-form {
        width: 95%; /* 在小屏幕上增加宽度占比 */
        /* 其他样式保持不变 */
    }

    .headBox img {
        width: 50%; /* 根据需要调整图片的宽度占比 */
        height: auto;
    }

    /* 模态框样式调整 */
    .modal-content {
        width: 95%; /* 模态框宽度调整为屏幕的95% */
    }
}

/* 针对超小屏幕设备的样式 */
@media (max-width: 480px) {
    .registration-form {
        width: 100%; /* 在超小屏幕上宽度占满 */
        padding: 10px; /* 减少内边距 */
    }

    .headBox img {
        width: 60%; /* 进一步调整图片宽度以适应更小的屏幕 */
        height: auto;
    }
}

</style>